<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="search" class="demo-form-inline">
          <el-form-item :label="$t('parentAttribute')">
            <el-select
              v-model="search.parentAttributeId"
              :placeholder="`${$t('pleaseInput')}${$t('parentAttribute')}`"
              clearable

              style="width: 200px"
              class="filter-item"
            >
              <el-option
                v-for="item in parentAttributeListH"
                :key="item.id"
                :value="item.name"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('attributeName')">
            <el-select
              v-model="search.attributeName"
              :placeholder="`${$t('pleaseInput')}${$t('attributeName')}`"
              clearable

              style="width: 200px"
              class="filter-item"
            >
              <el-option
                v-for="item in attributeNameListH"
                :key="item.id"
                :value="item.name"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('AttributeType')">
            <el-input
              v-model="search.type"
              :placeholder="`${$t('pleaseInput')}${$t('AttributeType')}`"
            />
          </el-form-item>
          <el-form-item :label="$t('attributeValue')">
            <el-input
              v-model="search.attributeValue"
              :placeholder="`${$t('pleaseInput')}${$t('attributeValue')}`"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="doSearch">{{ $t('search') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import crudJob from '@/api/system/attributes'
export default {
  data() {
    return {
      attributeNameListH: [],
      parentAttributeListH: [],
      search: {}
    }
  },
  created() {
    crudJob.attributenamelist().then(res => {
      this.attributeNameListH = res.data
    })
    // 待定: ID和name不一致,查询还要穿name
    crudJob.parentattributelist().then(res => {
      this.parentAttributeListH = res.data
    })
  },
  methods: {
    doSearch() {
      this.$emit('doSearch', this.search)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0;
}
</style>
